<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <script src="jstemplate/util.js" type="text/javascript"></script>
    <script src="jstemplate/jsevalcontext.js" type="text/javascript"></script>
    <script src="jstemplate/jstemplate.js" type="text/javascript"></script> 
    <script src="util.js" type="text/javascript"></script> 
    <script>
function addChannel() {
  try {
    var servers = JSON.parse(localStorage.servers || "[]");
    var channelName = $F('channel');
    var serverName = $F('serverSelect')
    servers.forEach(function(server) {
      if (server.name == serverName) {
        server.channels = server.channels || [];
        server.channels.forEach(function(channel) {
          if (channel == channelName) {
            throw channelName + " is already open";
          }
        });
        server.channels.push(channelName);
      }
    });
    
    localStorage.servers = JSON.stringify(servers);
    window.opener.syncChannelList();
    window.opener.joinChannel(serverName, channelName);
    window.close();
  } catch (ex) {
    alert(ex);
  }
}

window.onload = function() {
  var servers = JSON.parse(localStorage.servers || "[]");
  if (servers.length == 0) {
    alert("You must first add a server connection");
    close();
  }

  jstProcess(new JsEvalContext(servers), $('serverSelect'));
}

    </script>
  </head>
  <body>
    <div>
      <select id="serverSelect">
        <option jsselect="$this" jscontent="name"></option>
      </select>
      <input id="channel" type="text" value="#channel">
    </div>
    <div>
    </div>
    <div>
      <input type="button" value="Add New Channel"
             onclick="addChannel();">
    </div>
  </body>
</html>
